<template>
  <div class="bodyRight">
    <div class="bodyRightTitle">
      <div><span>已添加标签</span></div>
      <div><el-button type="primary">恢复默认</el-button></div>
    </div>
    <div class="bodyRightLabel" v-loading="isLoading">
      <!-- ***.下面是第四步 -->
      <draggable
        v-model="tagsList"
        class="bodyRightdraggable"
        @sort="onDraggableUpdate"
        animation="300"
        chosenClass="chosen"
      >
        <transition-group v-for="item in tagsList" :key="item.value">
          <el-tag
            class="tabs"
            :key="item.value"
            @close="deleteTag(item)"
            style="margin-bottom: 5px"
            @dblclick="handleDblClick(item)"
          >
            <span class="a-select__tags-text tagname" v-if="!item.isEditName">
              <div :length="8" :tooltip="true">
                {{ item.label }}
              </div>
              <div title="删除">
                <i class="el-icon-close" @click.stop="removeLabel(item)"></i>
              </div>
            </span>
            <!-- <el-input
                v-else
                :ref="'input_' + item.value"
                v-model="item.label"
                :maxLength="22"
                @pressEnter="sumbitLabel(item)"
                placeholder="请输入标签名称"
                @blur="sumbitLabel(item)"
              ></el-input> -->
          </el-tag>
        </transition-group>
      </draggable>
    </div>
    <div>待添加标签</div>
     <div v-for="deletedTag in deletedTags" :key="deletedTag.value">
      {{ deletedTag.label }}
    </div>
  </div>
</template>

<script>
//第一步 ***.引入组件
import draggable from "vuedraggable";
export default {
  components: {
    draggable, //***.第二步
  },
  data() {
    return {
      tagsList: [],
      treeClass: "",
      classList: [],
      checkedCategoryKeys: [],
      categoryTree: [],
      defaultProps: {
        children: "subGroupList",
        title: "groupName",
        key: "groupCode",
      },
      eventSelectedNode: null,
      isLoading: false,
      deletedTags: [], // 用于存储已删除标签的新数组
    };
  },
  created() {
    this.load_init();
  },
  methods: {
    //拖拽动作   ***.第三步 拖拽完成事件
    onDraggableUpdate(e) {
      this.isLoading = true;
      setTimeout(() => {
        this.isLoading = false;
        //老位置
        const oldIndex = e.oldIndex;
        //新位置
        const newIndex = e.newIndex;
        const newSort = this.tagsList[e.newIndex].sort;
        this.tagsList[e.newIndex].sort = this.tagsList[e.oldIndex].sort;
        this.tagsList[e.oldIndex].sort = newSort;
        console.log(this.tagsList);
        this.$message.success("顺序变更成功!");
      }, 1000);
    },
    //初始化
    load_init() {
      for (let index = 0; index < 20; index++) {
        this.classList.push({
          value: "val" + index,
          label: "树层级_" + index,
        });
        this.tagsList.push({
          value: "val" + index,
          label: "树层级_" + index,
          //是否编辑
          isEditName: false,
          //排序
          sort: index,
          //loading
          isLoading: false,
        });
      }
    },
    removeLabel(item) {
      const indexToRemove = this.tagsList.findIndex(
        (tag) => tag.value === item.value
      );

      if (indexToRemove !== -1) {
        // 从 tagsList 数组中移除该标签
        const removedTag = this.tagsList.splice(indexToRemove, 1)[0];

        // 将已删除的标签移到 deletedTags 数组
        this.deletedTags.push(removedTag);

        this.$message.success("标签成功移除！");
      } else {
        this.$message.error("未找到要移除的标签！");
      }
    },
  },
};
</script>


<style lang="scss" scoped>
.bodyRight {
  width: 65%;
  height: 45%;

  .bodyRightTitle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    line-height: 18px;
  }
  .bodyRightLabel {
    width: 100%;
    height: 90%;
    overflow-y: auto;
    border: 2px solid #d9d9d9;
    border-radius: 4px;

    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    .bodyRightdraggable {
      display: flex;
      flex-wrap: wrap;
      padding: 10px;
    }
    .tabs {
      width: 125px;
      height: 35px;
      border: 1px dashed #ccc;
      border-radius: 25px;
      font-size: 16px;
      align-items: center;
      display: flex;
      cursor: pointer;
      .tagname {
        width: 100%;
        display: flex;
        justify-content: space-between;
      }
      i {
        display: none;
      }
      &:hover {
        i {
          font-size: 16px;
          color: red;
          display: inline-block;
        }
      }
    }
    //***.第五步 样式
    .chosen {
      .tabs {
        border: 1px solid #1890ff;
        background-color: #fff !important;
        color: #1890ff;
        cursor: move;
      }
    }
  }
}
</style>